<template>
  <div id="cardBox">
    <el-row :gutter="20">
      <el-col :span="1.5">
        <el-tag class="tags" v-if="notice.order === 2" effect="dark" type="success">普通公告</el-tag>
        <el-tag v-if="notice.order === 1" effect="dark" type="danger">重要公告</el-tag>
      </el-col>
      <el-col :span="19">
        <div class="text">{{notice.content}}</div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-icon class="time-icon" :size="12"><Clock /></el-icon>
          <span class="time">{{notice.updateTime}}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
import {Clock} from '@element-plus/icons-vue'
export default {
  name: 'BlogNotice',
  components: {
    Clock
  },
  props: {
    notice: {
      type: Object,
      default: () => ({
        content: '空',
        updateTime: '2022-08-21 23:51:55',
        order: 2,
        createTime: "2022-08-25 10:58:06",
        deleted: false,
        id: 13,
        publisherId: 1
      })
    }
  },
  data () {
    return {

    }
  },
  methods: {

  },
  computed: {
  },
  mounted () {

  }
}
</script>

<style scoped>
.tags {
  margin-left: 5px;
}
.time {
  font-size: 14px;
  color: #999;
  margin-left: 4px;
}
.text {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* display: -webkit-box; */
}
</style>
